<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>叮当图书网 - 购物车</title>
    <style>
        body{font-family: "Microsoft YaHei",Arial,sans-serif;}
        input[type="number"]{width:50px;text-align:center;}
        .qty-control{cursor:pointer;padding:4px 10px;border:1px solid #ccc;
            margin:0 5px;user-select:none;}
        table{border-collapse:collapse;margin-top:10px;width:100%;}
        th,td{padding:8px 10px;border-bottom:1px solid #ddd;vertical-align:top;}
    </style>
</head>
<body>

<div>您的位置：<a href="../exp2/ex2.html">首页</a> &gt; 我的购物车</div>

<form>
    <table>
        <tr>
            <th><input type="checkbox" id="chkAll"> 全选</th>
            <th>书籍名称</th>
            <th>单价（元）</th>
            <th>数量</th>
            <th>小计（元）</th>
            <th>操作</th>
        </tr>

        <!-- 书籍 1 -->
        <tr>
            <td><input type="checkbox" class="book-box"></td>
            <td>
                <img src="../exp2/java.jpg" alt="书籍" width="80"><br>
                <a href="#">零基础学设计从自学入门到职场进阶</a>
            </td>
            <td class="price">52.7</td>
            <td>
                <span class="qty-control" onclick="changeQty(this,-1)">-</span>
                <input type="number" value="1" min="1" onchange="updateTotals()">
                <span class="qty-control" onclick="changeQty(this, 1)">+</span>
            </td>
            <td class="subtotal">52.7</td>
            <td><a href="#">删除</a></td>
        </tr>

        <!-- 书籍 2 -->
        <tr>
            <td><input type="checkbox" class="book-box"></td>
            <td>
                <img src="../exp2/jsp.jpg" alt="书籍" width="80"><br>
                <a href="#">JSP &amp; Servlet学习笔记</a>
            </td>
            <td class="price">40.0</td>
            <td>
                <span class="qty-control" onclick="changeQty(this,-1)">-</span>
                <input type="number" value="1" min="1" onchange="updateTotals()">
                <span class="qty-control" onclick="changeQty(this, 1)">+</span>
            </td>
            <td class="subtotal">40.0</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>

    <div style="margin-top:20px;">
        <input type="submit" value="批量删除">
    </div>

    <div style="margin-top:20px;text-align:right;">
        商品总价（不含运费）：<strong id="total">92.7元</strong>
        <input type="submit" value="立刻购买">
    </div>
</form>

<!-- 业务脚本 -->
<script>
    function changeQty(btn,delta){
        const input = btn.parentElement.querySelector('input[type="number"]');
        input.value = Math.max(1, parseInt(input.value)+delta);
        updateTotals();
    }
    function updateTotals(){
        let total = 0;
        document.querySelectorAll("table tr").forEach(row=>{
            const p = row.querySelector(".price");
            const q = row.querySelector('input[type="number"]');
            const s = row.querySelector(".subtotal");
            if(p&&q&&s){
                const sub = (parseFloat(p.textContent)*parseInt(q.value)).toFixed(2);
                s.textContent = sub;
                total += parseFloat(sub);
            }
        });
        document.getElementById("total").textContent = total.toFixed(2)+"元";
    }


    const chkAll  = document.getElementById("chkAll");

    const bookCbs = document.querySelectorAll(".book-box");

    /* 全选 / 取消全选 */
    chkAll.onclick = () => {
        bookCbs.forEach(cb => cb.checked = chkAll.checked);
    };


    bookCbs.forEach(cb=>{
        cb.onclick = () => {
            // every() 只要有一个未勾选就返回 false
            chkAll.checked = Array.from(bookCbs).every(box => box.checked);
        };
    });
</script>

</body>
</html>
